<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>header</title>
    <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" th:inline="javascript">
        /*<![CDATA[*/
        $(document).ready(function(){
            $("#search_btn").click(function(){
                window.location.href="/label?label=" + $("#search_input").val();
            });
            $("#search_input").keydown(function(e){
                if(e.keyCode==13){
                    window.location.href="/label?label=" + $("#search_input").val();
                }
            });
        });
        /*]]>*/
    </script>
    <style type="text/css">
        .head{height: 50px;
            width: 100%;
            position: fixed;
            top: 0;
            z-index: 1;
            background-color: white;
            font-family: "YouYuan";
            text-align: left;  }
        .logo{float: left;
            height: 100%;
            margin-left: 15%;
            text-align: left;}
        .login{
            margin-right: 15%;
            text-align: right;
            float: right;
            font-size: 18px;  }
        .login a:link{color: gray;  }
        .login a:visited{color: gray;}
        a{text-decoration: none;}
        a:link{color: black;}
        a:visited{color: black;}
        a:hover{color: red;}
        a:active{color: red;}
        .label{
            float: left;
            list-style: none;
        }
        .label li{
            font-size: 22px;
            display: inline;
            margin-right: 30px;
        }
        .search{
            margin-top: 14px;
            width: 180px;
            height: 30px;
            outline: none;
            border-bottom: 1px solid #dbdbdb;
            border-top:0px;
            border-left:0px;
            border-right:0px;
        }
        #search_btn{
            margin-left: -10px;
            height: 34px;
            width: 44px;
            border: solid 0.5px;
            color: white;
            background-color: tomato;
        }
    </style>
</head>
<body>
<div class="head" th:fragment="logo">
    <div class="logo">
        <a href="/" target="_self">
            <img style="float: left" src="/image/logo.png"/>
        </a>
        <ul class="label">
            <a target="_self" href="/label?label=明星"><li>明星</li></a>
            <a target="_self" href="/label?label=时尚"><li>时尚</li></a>
            <a target="_self" href="/label?label=影视"><li>影视</li></a>
            <a target="_self" href="/label?label=宠物"><li>宠物</li></a>
            <a target="_self" href="/label?label=生活"><li>生活</li></a>
        </ul>
        <input id="search_input" placeholder="输入新闻标签" type="search" class="search"/>
        <button id="search_btn">搜索</button>
    </div>
    <div class="login" th:if=${session.user==null}>
        <a href="/user/login" target="_self">登录</a>
        | <a href="/user/signup" target="_self">注册</a>
    </div>
    <div class="login" th:if=${session.user!=null}>
        <a th:href="@{'/user/'+${session.user.id}}" target="_self" th:text="${session.user.username}">用户</a>
        |
        <a href="/user/logout" target="_self">注销</a>
    </div>
    <hr style="margin-top: 50px"/>
</div>
</body>
</html>